import React, {useState} from 'react';

const Index = () => {
    /**
     * 类组件与函数组件区别:
     * 类组件（状态组件，复杂组件）是通过类定义，函数组件（非状态组件，简单组件）是通过函数定义
     * 类组件是拥有状态，函数没有
     * 类组件拥有ref,函数没有
     * 类组件拥有生命周期，函数没有
     */

    /**
     * Hooks介绍:
     * 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
     * Hooks 是一些特殊的函数，它可以让你 “钩入” React 的特性。
     * hooks函数是以 use开头。
     * Hooks的单词意思为“钩子”。React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。
     * React Hooks就是加强版的函数组件，降低了开发难度，我们可以完全不使用 `class`，就能写出一个全功能的组件。
     * 可以不用使用高阶组件依然可以进行功能复用了。
     * 使用场景：
     * 官方： 如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其转化为 class。现在你可以在现有的函数组件中使用 Hooks
     * 注意：
     *  hooks函数只允许在函数组件或自定义hooks函数中调用
     */

    const useFn = () => {
        // 所有的hooks(以use开头的函数）只允许在函数组件中或自定义的hooks函数中调用。
        const [num, setNum] = useState(0);
    }

    return (
        <div>
            <button onClick={() => {
                // const [num,setNum] = useState(0);// 不允许
            }}>点我
            </button>
        </div>
    );

};

export default Index;